<template>
  <div class="type">
    <BreadCrumb>
      <template v-slot:first>首页</template>
      <template v-slot:second>类型</template>
      <template v-slot:third>{{ route.query.name }}</template>
    </BreadCrumb>
    <div class="type_main">
      <template v-for="item in typeItem" :key="item.id">
        <Cover
          v-if="item.id !== null"
          @click="toArticleDetail(item.id)"
          :article="item"
          :isShowIcon="false"
          pcWidth="32%"
          pcHeight="400px"
          mobileWidth="100%"
          mobileHeight="412px"
        />
      </template>
      <div v-for="item in 3" :key="item" style="width: 32%; height: 0"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue'
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import Cover from '@/components/Cover.vue'
  import { useRoute, useRouter } from 'vue-router'
  import { queryArticleByTypeRequest } from '@/network/api/type'

  const router = useRouter()
  const route = useRoute()
  const typeItem = ref([])
  onBeforeMount(async () => {
    const result = await queryArticleByTypeRequest(route.params.id)
    typeItem.value = result.result
  })
  const toArticleDetail = id => {
    router.push(`/article/${id}`)
  }
</script>

<style scoped lang="less">
  .type {
    width: 100%;
    .type_main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 100%;
    }
  }
</style>
